<template>
  <div>
    <!--导航栏-->
    <van-nav-bar
      title="考勤统计"
      left-text="返回"
      right-text="按钮"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <van-tabs>
      <!--时间筛选-->
      <div class="timeCtl">
        <van-button type="primary">月</van-button>
        <van-button type="primary">周</van-button>
      </div>
      <div>
        <van-cell-group>
          <van-cell title="平均工时" value="内容">
            7.5小时
          </van-cell>
          <van-cell title="出勤天数" value="内容">
            7天
          </van-cell>
          <van-cell title="休息天数" value="内容">
            10天
          </van-cell>
          <van-cell title="迟到" value="内容">
            7次
          </van-cell>
          <van-cell title="早退" value="内容">
            7次
          </van-cell>
          <van-cell title="外勤" value="内容">
            7次
          </van-cell>
          <van-cell title="加班" value="内容">
            7次
          </van-cell>
        </van-cell-group>
      </div>
    </van-tabs>
  </div>
</template>

<script>
  import {Toast} from "vant";

  export default {
    data() {
      return {
        minDate: new Date(2020, 0, 1),
        maxDate: new Date(2025, 10, 1),
        currentDate: new Date()
      };
    },
    methods: {
      onClickLeft() {
        this.$router.push('/work')
      },
      onClickRight() {
        Toast('按钮');
      },

      formatter(type, val) {
        if (type === 'year') {
          return `${val}年`;
        } else if (type === 'month') {
          return `${val}月`
        }
        return val;
      }
    }
  }
</script>

<style scoped>
  .timeCtl {
    margin-right: 70%;
  }

</style>
